$(document).ready(function() {
	for(var i = 1; i<10; i++){
		$("#spielfeld").append("<div class ='spielteil'><div class ='punkte'></div><div class ='punkte'></div><div class ='punkte'></div><div class ='punkte'></div><div class='leer'></div></div>");

	}


	$(".leer").append("	<div id = 'check'><table> <tr><td> <div class = 'dot'></div></td><td> <div class = 'dot'></div></td></tr><tr><td> <div class = 'dot'></div></td><td> <div class = 'dot'></div></td>	</tr></table>");

	$("#wellcome").click(function(){
		$("#wellcome").toggle();
		$("#spielfeld").toggle();
	});

	$("#buttonstart").click(function(){
		$("#buttonstart").animate({

			marginLeft: "+=105px"

		}), 100;
	});
	var zaeler = 1;
	$(".punkte").click(function(){
		if (zaeler === 1){
			$("this").css("background-color", "blue");
		}
		if (zaeler === 2){
			$("this").css("background-color", "brown");
		}
		if (zaeler === 3){
			$("this").css("background-color", "purple");
		}
		if (zaeler === 4){
			$("this").css("background-color", "green");
		}
		if (zaeler === 5){
			$("this").css("background-color", "yellow");
		}
		if (zaeler === 6){
			$("this").css("background-color", "grey");
		}
		zaehler = zaehler+1;
		if (zaehler >6){
			zaehler = 1;
		}

	});
});